<template>
  <div class="header">
    <i
      :class="[isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold', 'iconStyle']"
      @click="handleClose"
      class="relative z-10"
    ></i>
    <div class="header_left" style="width: 300px">
      <el-row>
        <el-col :span="12"></el-col>
        <el-col :span="12" class="userInfo"> <UserInfo /> </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue'
export default defineComponent({
  name: 'TwtHeader',
  components: {
    UserInfo: defineAsyncComponent(() => import('@/components/UserInfo.vue'))
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
    const handleClose = () => {
      context.emit('handleClose', !props.isCollapse)
    }
    return {
      handleClose
    }
  }
})
</script>

<style scoped lang="less">
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  .iconStyle {
    font-size: 24px;
    cursor: pointer;
  }
  .header_left {
    width: 150px;
  }
  .userInfo {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
